<template>
    <div class="lineChart" ref="echartRef" style="width: 570px; height: 239px;"></div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
import { ref, reactive, onMounted,watchEffect,computed } from 'vue';
import useMainStore from '@/store/main/main'
import { storeToRefs } from 'pinia'  
import type { EChartsOption } from 'echarts'
const systemStore = useMainStore()
const { chartDate } = storeToRefs(systemStore) 
interface IProps {
    index: Number
} 
const { index } = defineProps<IProps>() 

const chartDateList = computed(() => {
    let array = []
     chartDate.value.map((items,key) => {
         if (key == index) {           
            array = items
        }
     })
    return array
})
 

const listDate = [
    {
        name: '最高温',
        type: 'line',
        smooth: 0.6,
        showSymbol: false,
        data: [60, 80, 91, 74, 90, 50, 80, 65, 74, 90, 70, 95],
    },
    {
        name: '平均温',
        type: 'line',
        smooth: 0.6,
        showSymbol: false,
        data: [40, 55, 51, 54, 60, 35, 55, 48, 51, 54, 40, 65],
    },
    {
        name: '最低温',
        type: 'line',
        smooth: 0.6,
        showSymbol: false,
        data: [20, 32, 11, 34, 30, 20, 30, 5, 34, 30, 30, 35],
    }
]
const timeDate = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12 (h)']
const colorDate = ['#EB3A3C', '#E9BC21', '#2F9DF1'] 
const time = reactive(timeDate)
const color = reactive(colorDate)
const echartRef = ref(null)


 
// console.log(option.value,'------------option.value');


onMounted(() => {
    // nextTick(() => { 
        const myChart = echarts.init(echartRef.value) 
        
        const option = computed<EChartsOption>(()=>{
            return {
                tooltip: {
                    trigger: 'axis',
                    className: 'custom-tooltip-box', //设置背景图片
                    formatter: function (params:any) {
                        let content = `
                    <div class="custom-tooltip-style"  style="position: relative;" >
                    <div><span style=" position: absolute; top:-17px; left: -17px;display: inline-block;width: 15px;height: 15px;background: #1AF2FF;clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);"></span> </div>
                `
                        for (var i = 0; i < params.length; i++) {
                            const { seriesName, value } = params[i]
                            content += ` 
                    <div style="line-height: 25px;"> ${seriesName}：  ${value} ℃</div></div>
                `
                        }
                        return content
                    },
                    backgroundColor: 'rgba(0,62,105,0.87)', // 背景颜色
                    borderColor: '#1AF2FF', // 边框颜色
                    borderWidth: 1, // 边框宽度
                    borderRadius: 0,
                    padding: 20, // 内边距
                    textStyle: {
                        color: '#DBF3FF', // 文本颜色
                        fontSize: 20, // 文本大小 

                    }
                },
                color: color,
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },

                xAxis: {
                    nameLocation: 'end',
                    type: 'category',
                    boundaryGap: false,
                    data: time,
                    axisTick: {
                        show: false,

                    },
                    axisLine: {                                    //坐标轴轴线设置
                        show: true,                                  //是否显示坐标轴轴线
                        symbol: ['none', 'none'],                  //坐标轴箭头        (可选'none'   'arrow'   ['none','arrow'])                          
                        lineStyle: {                                //坐标轴的线
                            color: '#355B68',                            //线的颜色
                            width: 2,                                //线的粗细程度    (用数字表示)
                            type: 'solid',                            //线的类型        (可选solid  dotted  dashed)
                            opacity: 0.55                               //线的透明度        (用0~1的小数表示)
                        }
                    },
                    axisLabel: {                                //坐标轴刻度文字的设置
                        show: true,
                        interval: 0,                             //是否显示
                        inside: false,                             //坐标轴刻度文字指向        (true表示向上   false表示向下)
                        rotate: 0,                                 //坐标轴刻度文字的旋转角度
                        margin: 10,                                 //坐标轴刻度文字与轴线之间的距离
                        color: '#DCDCDC',                              //坐标轴刻度文字的颜色
                        fontSize: 18,                                //坐标轴刻度文字的样式          (可选normal  italic   oblique)
                        fontFamily: 'MicrosoftYaHei',                        //坐标轴刻度文字的风格        (可选楷体  宋体  华文行楷等等)
                        padding: [5, 0, 2, 0]                    //坐标轴刻度文字的边距        (上右下左)          
                    },

                },
                yAxis: {
                    show: true,
                    type: 'value',
                    minInterval: 25, // 设置最小的刻度是1
                    axisTick: {
                        show: false // 不显示刻度线
                    },
                    nameTextStyle: { // 坐标轴名称的文字样式
                        color: '#fff', // 坐标轴名称的颜色
                        fontSize: 19, // 坐标轴名称的大小         (用数字表示)
                        fontWeight: 'bold', // 坐标轴文字加粗程度        (可选bold   bolder  lighter  normal)
                        fontstyle: 'normal', // 坐标轴文字样式      (可选normal  italic   oblique)
                        fontFamily: 'Adobe Heiti Std R', // 坐标轴文字风格        (可选楷体  宋体  华文行楷等等)
                        padding: [15, 0, 2, -5] // 坐标轴文字边距        (上右下左)
                    },
                    axisLine: { // 坐标轴轴线设置
                        show: true, // 是否显示坐标轴轴线
                        symbol: ['none', 'none'], // 坐标轴箭头        (可选'none'   'arrow'   ['none','arrow'])
                        symbolSize: [8, 8], // 箭头大小        ([宽度,高度])
                        symbolOffset: [0, 7], // 箭头偏移
                        lineStyle: { // 坐标轴的线
                            color: '#355B68', // 线的颜色
                            width: 2, // 线的粗细程度    (用数字表示)
                            type: 'solid', // 线的类型        (可选solid  dotted  dashed)
                            opacity: 0.55 // 线的透明度        (用0~1的小数表示)
                        }
                    },
                    axisLabel: {                                //坐标轴刻度文字的设置
                        show: true,                                 //是否显示
                        inside: false,                             //坐标轴刻度文字指向        (true表示向上   false表示向下)
                        rotate: 0,                                 //坐标轴刻度文字的旋转角度
                        margin: 10,                                 //坐标轴刻度文字与轴线之间的距离
                        color: '#fff',                              //坐标轴刻度文字的颜色
                        fontSize: 19,                                //坐标轴刻度文字的大小         (用数字表示)
                        // fontWeight: 'lighter',                        //坐标轴刻度文字的加粗程度    (可选bold   bolder  lighter  normal)
                        fontstyle: 'normal',                        //坐标轴刻度文字的样式          (可选normal  italic   oblique)
                        fontFamily: 'MicrosoftYaHei',                  //坐标轴刻度文字的边距        (上右下左)          
                    },
                    splitLine: {                                //网格线
                        show: true,                                  //是否显示
                        lineStyle: {                                //网格线样式
                            color: '#0E4E64',                        //网格线颜色
                            width: 1,                                //网格线的加粗程度
                            type: 'solid',                         //网格线类型
                            opacity: 0.87
                        }
                    },
                },

                series: chartDateList.value
            }
        })
        myChart.setOption(option.value)
    watchEffect(() => {
        myChart.setOption(option.value)
    })
    // })
}) 
</script>



























<!-- <script>
import * as echarts from 'echarts'
export default {
    name: 'LineChart',
    data() {
        return {
            date: [
                {
                    name: '最高温',
                    type: 'line',
                    smooth: 0.6,
                    showSymbol: false,
                    data: [60, 80, 91, 74, 90, 50, 80, 65, 74, 90, 70, 95]
                },
                {
                    name: '平均温',
                    type: 'line',
                    smooth: 0.6,
                    showSymbol: false,
                    data: [40, 55, 51, 54, 60, 35, 55, 48, 51, 54, 40, 65]
                },
                {
                    name: '最低温',
                    type: 'line',
                    smooth: 0.6,
                    showSymbol: false,
                    data: [20, 32, 11, 34, 30, 20, 30, 5, 34, 30, 30, 35]
                }
            ],
            time: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12 (h)'],
            color: ['#EB3A3C', '#E9BC21', '#2F9DF1']
        }
    },
    mounted() {
        this.initLineChart()
    },
    methods: {
        initLineChart() {
            const chartDom = this.$refs.lineChart
            const myChart = echarts.init(chartDom)
            const option = {

                tooltip: {
                    trigger: 'axis',
                    className: 'custom-tooltip-box', //设置背景图片
                    formatter: (params, ticket, callback) => {
                        const { axisValue } = params[0]
                        let content = `
                        <div class="custom-tooltip-style"  style="position: relative;" >
                      <div><span style=" position: absolute; top:-17px; left: -17px;display: inline-block;width: 15px;height: 15px;background: #1AF2FF;clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);"></span> </div>
                  `
                        for (var i = 0; i < params.length; i++) {
                            const { seriesName, value, marker } = params[i]
                            content += ` 
                      <div style="line-height: 25px;"> ${seriesName}：  ${value} ℃</div></div>
                    `
                        }
                        return content
                    },
                    backgroundColor: 'rgba(0,62,105,0.87)', // 背景颜色
                    borderColor: '#1AF2FF', // 边框颜色
                    borderWidth: 1, // 边框宽度
                    borderRadius: 0,
                    padding: 20, // 内边距
                    textStyle: {
                        color: '#DBF3FF', // 文本颜色
                        fontSize: 20, // 文本大小 

                    }
                },
                color: this.color,
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },

                xAxis: {
                    nameLocation: 'end',
                    type: 'category',
                    boundaryGap: false,
                    data: this.time,
                    axisTick: {
                        show: false,

                    },
                    axisLine: {                                    //坐标轴轴线设置
                        show: true,                                  //是否显示坐标轴轴线
                        symbol: ['none', 'none'],                  //坐标轴箭头        (可选'none'   'arrow'   ['none','arrow'])                          
                        lineStyle: {                                //坐标轴的线
                            color: '#355B68',                            //线的颜色
                            width: 2,                                //线的粗细程度    (用数字表示)
                            type: 'solid',                            //线的类型        (可选solid  dotted  dashed)
                            opacity: 0.55                               //线的透明度        (用0~1的小数表示)
                        }
                    },
                    axisLabel: {                                //坐标轴刻度文字的设置
                        show: true,
                        interval: 0,                             //是否显示
                        inside: false,                             //坐标轴刻度文字指向        (true表示向上   false表示向下)
                        rotate: 0,                                 //坐标轴刻度文字的旋转角度
                        margin: 10,                                 //坐标轴刻度文字与轴线之间的距离
                        color: '#DCDCDC',                              //坐标轴刻度文字的颜色
                        fontSize: 18,                                //坐标轴刻度文字的样式          (可选normal  italic   oblique)
                        fontFamily: 'MicrosoftYaHei',                        //坐标轴刻度文字的风格        (可选楷体  宋体  华文行楷等等)
                        padding: [5, 0, 2, 0]                    //坐标轴刻度文字的边距        (上右下左)          
                    },

                },
                yAxis: {
                    show: true,
                    type: 'value',
                    minInterval: 25, // 设置最小的刻度是1
                    axisTick: {
                        show: false // 不显示刻度线
                    },
                    nameTextStyle: { // 坐标轴名称的文字样式
                        color: '#fff', // 坐标轴名称的颜色
                        fontSize: 19, // 坐标轴名称的大小         (用数字表示)
                        fontWeight: 'bold', // 坐标轴文字加粗程度        (可选bold   bolder  lighter  normal)
                        fontstyle: 'normal', // 坐标轴文字样式      (可选normal  italic   oblique)
                        fontFamily: 'Adobe Heiti Std R', // 坐标轴文字风格        (可选楷体  宋体  华文行楷等等)
                        padding: [15, 0, 2, -5] // 坐标轴文字边距        (上右下左)
                    },
                    axisLine: { // 坐标轴轴线设置
                        show: true, // 是否显示坐标轴轴线
                        symbol: ['none', 'none'], // 坐标轴箭头        (可选'none'   'arrow'   ['none','arrow'])
                        symbolSize: [8, 8], // 箭头大小        ([宽度,高度])
                        symbolOffset: [0, 7], // 箭头偏移
                        lineStyle: { // 坐标轴的线
                            color: '#355B68', // 线的颜色
                            width: 2, // 线的粗细程度    (用数字表示)
                            type: 'solid', // 线的类型        (可选solid  dotted  dashed)
                            opacity: 0.55 // 线的透明度        (用0~1的小数表示)
                        }
                    },
                    axisLabel: {                                //坐标轴刻度文字的设置
                        show: true,                                 //是否显示
                        inside: false,                             //坐标轴刻度文字指向        (true表示向上   false表示向下)
                        rotate: 0,                                 //坐标轴刻度文字的旋转角度
                        margin: 10,                                 //坐标轴刻度文字与轴线之间的距离
                        color: '#fff',                              //坐标轴刻度文字的颜色
                        fontSize: 19,                                //坐标轴刻度文字的大小         (用数字表示)
                        // fontWeight: 'lighter',                        //坐标轴刻度文字的加粗程度    (可选bold   bolder  lighter  normal)
                        fontstyle: 'normal',                        //坐标轴刻度文字的样式          (可选normal  italic   oblique)
                        fontFamily: 'MicrosoftYaHei',                  //坐标轴刻度文字的边距        (上右下左)          
                    },
                    splitLine: {                                //网格线
                        show: true,                                  //是否显示
                        lineStyle: {                                //网格线样式
                            color: '#0E4E64',                        //网格线颜色
                            width: 1,                                //网格线的加粗程度
                            type: 'solid',                         //网格线类型
                            opacity: 0.87
                        }
                    },
                },
                series: this.date
            }

            myChart.setOption(option)
        }
    }
}
</script> -->
<style lang="scss" scoped>
.lineChart {
    margin-top: -37px;
}

.custom-tooltip-box {
    .custom-tooltip-style {
        padding: 20px;

        .title {
            background: #fff;
            width: 100%;
            height: 20px;
        }
    }



}
</style>
